<template>
  <div class="cd-listpanel">
    <Card class="search-wrap mb10" v-if="props.showSearch" dis-hover ref="searchCard">
      <Form
        class="search-wrap-form"
        ref="tableSearchFormRef"
        :model="props.searchForm"
        :inline="inline"
        :label-width="props.labelWidth"
        @keydown.native.enter="onKeyboardQuery"
      >
        <!-- 默认隐藏的聚焦输入框 -->
        <!-- 会影响列表文本的复制，先关闭 -->
        <!-- <input style="position: absolute; z-index: -1" v-show="keyboardSearchOn" ref="defInput" type="text" /> -->

        <!-- 普通查询条件插槽 -->
        <slot name="search"></slot>

        <!-- 可收起普通查询条件插槽 -->
        <div v-show="foldShow">
          <slot name="fold"></slot>
        </div>

        <!-- 高级查询条件插槽 -->
        <template v-if="isShowOtherQuery">
          <AdvancedQueryPanel
            view-no="jy_eqdBasic1000tpm_list_query"
            :searchForm="props.searchForm"
          ></AdvancedQueryPanel>

          <!-- <QueryPanel
            v-show="isShowOtherQuery && showOtherQueryPanel"
            :queryViewNo="queryViewNo"
            :searchForm="searchForm"
            :slots="otherQueryPanelSlots"
            :isLocalQueryConfig="isLocalQueryConfig"
            :localQueryConfig="localQueryConfig"
            @on-render-call="queryFormCall"
            ref="queryPanel"
          >
            <template v-for="(item, index) in otherQueryPanelSlots">
              <div :key="index" :slot="item">
                <slot :name="item"></slot>
              </div>
            </template>
          </QueryPanel> -->
        </template>
      </Form>

      <Row class="search-wrap-btns" v-if="hasSearch">
        <Col class="tc" span="24">
          <Button type="primary" icon="ios-search" :loading="loading" @click="query">查询</Button>
          <Button class="ml10" v-if="showResetBtn" icon="md-refresh" @click="reset"> 重置 </Button>
          <slot name="otherBtn"></slot>

          <div class="text-btn-box">
            <Button class="text-info" v-if="props.isFold" type="text" @click="foldShow = !foldShow">
              <Icon :type="foldShow ? 'ios-arrow-up' : 'ios-arrow-down'" />
              {{ foldShow ? '隐藏' : '展开' }}
            </Button>

            <Button class="text-info" v-if="showOtherQueryPanel" type="text" @click="showQueryConfigPage">
              <Icon type="md-flower" />
              设置
            </Button>

            <Button
              class="text-info"
              v-if="showOtherQueryPanel"
              type="text"
              @click="isShowOtherQuery = !isShowOtherQuery"
            >
              <Icon type="ios-search-outline" />
              <span>{{ isShowOtherQuery ? '普通查询' : '高级查询' }}</span>
            </Button>
          </div>
        </Col>
      </Row>
    </Card>

    <Card dis-hover></Card>
  </div>
</template>

<script setup lang="ts">
import { computed } from '@vue/reactivity'
import { reactive, ref } from 'vue'
import AdvancedQueryPanel from './AdvancedQueryPanel.vue'
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true
  },
  isEcheser: {
    type: Boolean,
    default: false
  },
  showOtherQueryPanel: {
    type: Boolean,
    default: true
  },
  labelWidth: {
    type: Number,
    default: 120
  },
  searchForm: {
    type: Object,
    default: () => {}
  },
  isFold: {
    type: Boolean,
    default: false
  },
})

const isShowOtherQuery = ref(false)
const inline = ref(true)
const showResetBtn = ref(true)
const foldShow = ref(false)
const loading = ref(false)
const hasSearch = ref(true)

// 查询
const query = () => {
  loading.value = true
  console.log(props.searchForm, 111)

  setTimeout(() => {
    loading.value = false
  }, 1000)
}

// 回车查询
const keyboardSearchOn = computed(() => {
  return ''
})
const onKeyboardQuery = () => {
  if (keyboardSearchOn) query()
}

// 高级查询条件自定义窗口
const showQueryConfigPage = () => {}
const showOtherQuery = () => {}

const tableSearchFormRef = ref()
const reset = () => {
  console.log(111)
}
</script>

<style lang="less">
.cd-listpanel {
  .search-wrap {
    &-form {
    }
    &-btns {
      position: relative;
      .text-btn-box {
        position: absolute;
        right: 0;
        top: 0;
        .text-info {
          color: #1190fb;
        }
      }
    }
  }
}
</style>
